import React, { useState, useEffect } from "react";
import { Image } from "antd";
import { GOODS_NUMBER } from "@/views/utils/constant";
import CommonTableSort from "@/views/components/CommonTableSort";
import WarehouseSelect from "@/views/components/WarehouseSelect";
import { Input, Select, BatchSuffixInput } from "@/views/components/PrefixPlaceholder";
import StashSelect from "@/views/components/StashSelect";

export default ({
	handleJump,
	warehouseList,
	fetchPage,
	refWarehouseSort,
	defaultValue,
	handleWarehouseChange,
	selectedWarehouse
}) => {
	console.log(defaultValue.current, "warehouseListwarehouseList", refWarehouseSort);
	const defaultColumns = [
		{
			name: "序号",
			code: "index",
			lock: true,
			render: (t, r, i) => i + 1,
			width: 60
		},
		{
			name: "商品图片",
			code: "skuImage",
			render: (value, record, i) => <Image width={60} src={value} />,
			width: 100
		},
		{
			name: "商品名称",
			code: "skuName",
			search: {
				order: 1,
				content: () => <Input allowClear placeholder="商品名称" />
			},
			width: 200
		},
		{
			name: "商品编码",
			code: "skuCode",
			search: {
				order: 2,
				content: () => <Input allowClear placeholder="商品编码" />
			},
			width: 150
		},
		{
			name: "款式编码",
			code: "spuCode",
			search: {
				order: 3,
				content: () => <Input allowClear placeholder="款式编码" />
			},
			width: 150
		},
		{
			name: "颜色规格",
			code: "skuSpec",
			search: {
				order: 4,
				content: () => <Input allowClear placeholder="颜色规格" />
			},
			width: 150
		},
		{
			name: "发货仓总库存",
			code: "saleableNum",
			width: 150,
			render: (text, record) => (
				<span>
					<div style={{ fontWeight: 700 }}>{text}</div>
					<div>
						<span className="mr10 ">上限：{record.highWarnValue}</span>
						<span>下限：{record.lowWarnValue}</span>
					</div>
				</span>
			),
			title: () => (
				<CommonTableSort
					value={refWarehouseSort}
					title={"发货仓总库存"}
					onClick={order => {
						refWarehouseSort.current = order;
						fetchPage();
					}}
				/>
			)
		},

		{
			name: "采购在途",
			code: "wayNum",
			width: 100,
			search: {
				order: 180,
				span: 6,
				group: [
					{
						span: 8,
						code: "warehouseId",
						formItemProps: {
							initialValue: defaultValue.current
						},
						content: () => (
							<Select
								style={{ width: "100%" }}
								placeholder={"请选择仓库"}
								value={selectedWarehouse}
								defaultValue={defaultValue.current}
								options={warehouseList.current}
							></Select>
							// <StashSelect
							// 	placeholder={"自发仓"}
							// 	defaultValue={defaultValue.current}
							// 	warehouseList={warehouseList.current}
							// 	multiple={"multiple"}
							// 	value={selectedWarehouse}
							// />
						)
					},
					{
						span: 8,
						code: "symbol",
						content: () => (
							<Select
								origin={origin}
								style={{ width: "100%" }}
								allowClear
								defaultValue={1}
								placeholder={"商品数量"}
								options={GOODS_NUMBER}
							/>
						)
					},
					{
						span: 6,
						code: "skuNum",
						content: () => <Input origin={origin} allowClear placeholder={"数量"}></Input>
					}
				]
			}
		},

		{
			name: "操作",
			code: "action",
			lock: true,
			width: 100,
			render: (t, r, i) => {
				return <span className="opera-span-common">{<span onClick={() => handleJump("inventory", r)}>出入库记录</span>}</span>;
			}
		}
	];
	return { defaultColumns };
};
